<template>
  <div class="header">
    <div class="head_inner">
      <router-link to="/">
        <img src="../assets/logo.png" alt="logo" class="logo" />
      </router-link>
      <span class="title">这是标题</span>
      <div class="head_nav">
        <ul class="nav_list">
          <li class="item">登录</li>
          <li class="item nav-pile">|</li>
          <li class="item">注册</li>
          <li class="item nav-pile">|</li>
          <li class="item">关于</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "header",
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.header {
  background: #363636;
  color: #b2b2b2;
  height: 90px;
  line-height: 90px;
  width: 100%;
  .head_inner {
    width: 1200px;
    overflow: hidden;
    margin: 0 auto;
    .logo {
      float: left;
      width: 50px;
      margin-top: 20px;
    }
    .title{
      font-weight: 500;
      font-size: 20px;
      float: left;
      margin-left: 15px;
    }
    .head_nav {
      float: right;
      .nav_list {
        overflow: hidden;
        .item {
          cursor: pointer;
          display: inline-block;
          &:hover {
            color: #4fc08d;
          }
          &.nav-pile {
            padding: 0 8px;
            &:hover {
              color: #b2b2b2;
            }
          }
        }
      }
    }
  }
}
</style>
